<style lang='scss' scoped>
	.index {
		swiper {
			padding: 0 20rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border-radius: 10rpx;
			}
		}

		.icons {
			margin: 20rpx 0;
			display: flex;
			flex-wrap: wrap;

			.list {
				width: 25%;
				text-align: center;

				image {
					width: 30%;
					box-sizing: border-box;
				}
			}
		}

		.coupon {
			overflow-y: auto;
			display: flex;
			margin: 0 20rpx;
			font-size: 24rpx;

			.list {
				display: flex;
				height: 100rpx;
				margin-left: 20rpx;
				color: #fff;

				.left {
					width: 500rpx;
					background-color: #d39e00;
					text-align: center;
					padding: 10rpx;
					box-sizing: border-box;

					.price {
						font-size: 30rpx
					}

				}

				.right {
					width: 100rpx;
					text-align: center;
					line-height: 100rpx;
					margin-left: 5rpx;
					background-color: #ffc107;
					font-size: 30rpx;
					box-sizing: border-box;
				}
			}
		}

		.H1_title {
			font-size: 30rpx;
			margin: 0 20rpx;
			font-weight: 500;
			margin: 30rpx;
		}

		.group {
			display: flex;
			overflow-y: auto;
			margin: 0 20rpx;
			box-sizing: border-box;

			.list {
				margin-right: 20rpx;

				image {
					width: 340rpx;
					height: 180rpx;
				}

				.warp {
					.title {
						font-size: 30rpx;
						font-weight: 900;
						width: 340rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.price {
						font-size: 35rpx;
						color: red;
					}
				}
			}
		}

		.H2_title {
			font-size: 30rpx;
			margin: 0 20rpx;
			font-weight: 500;
			margin: 30rpx;
			display: flex;
			justify-content: space-between;

			.text {
				font-size: 20rpx;
				color: #ccc;
			}
		}

		.imageAd {
			image {
				width: 100%;
			}
		}
	}
</style>
<template>
	<view class='index'>
		<SearchBtn></SearchBtn>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiper.data" :key="index">
				<image :src="item.src"></image>
			</swiper-item>
		</swiper>
		<view class="icons">
			<view class="list" v-for="(item,index) in icons" :key="index">
				<image :src="item.src" mode="widthFix"></image>
				<view class="title">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="coupon">
			<view class="list" v-for="(item,index) in coupon" :key="index">
				<view class="left">
					<view class="price">
						¥{{item.price}}
					</view>
					<view class="title">
						适用课程:{{item.value.title}}
					</view>
				</view>
				<view class="right">
					领取
				</view>
			</view>
		</view>
		<view class="H1_title">
			拼团
		</view>
		<view class="group">
			<view class="list" v-for="(item,index) in group" :key="index">
				<image :src="item.cover"></image>
				<view class="warp">
					<view class="title">
						{{item.title}}
					</view>
					<text class="price">¥{{item.price}}</text>
					<text>¥{{item.t_price}}</text>
				</view>
			</view>
		</view>
		<view class="H2_title">
			<text>最新列表</text>
			<text class="text">查看更多</text>
		</view>
		<view class="ALLlist">
			<MyList :list="list"></MyList>
		</view>
		<view class="imageAd">
			<image :src="imageAd" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		api
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				swiper: [],
				icons: [],
				coupon: [],
				group: [],
				list: [],
				imageAd: ''
			}
		},
		onShow() {
			this.getindexlist()
		},
		onLoad(o) {},
		methods: {
			async getindexlist() {
				// 
				const response = await api({
					url: "index",
					method: "GET"
				})
				if (response.code === 20000) {
					console.log(response.data);
					response.data.forEach(v => {
						if (v.type == "swiper") {
							this.swiper = v
						} else if (v.type == "icons") {
							this.icons = v.data
						} else if (v.type == 'list') {
							this.list = v.data
						} else if (v.type == "imageAd") {
							this.imageAd = v.data
						}
					})
				}
				// 
				const response1 = await api({
					url: "coupon?",
					method: "GET"
				})
				if (response1.code === 20000) {
					this.coupon = response1.data
				}
				// group?usable=1
				const response2 = await api({
					url: "group?usable=1",
					method: "GET"
				})
				if (response2.code === 20000) {
					this.group = response2.data.rows
				}
			}
		}
	}
</script>
